<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Kimi AI Chat</title>
		<style>
			body {
				font-family: Arial, sans-serif;
				margin: 0;
				padding: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
				background-color: #f5f5f5;
			}
			.chat-container {
				width: 80%;
				max-width: 800px;
				background-color: #fff;
				border-radius: 10px;
				box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
				padding: 20px;
				overflow: hidden;
			}
			.message-box {
				display: flex;
				margin-bottom: 15px;
				padding: 10px;
				border-radius: 5px;
			}
			.message-box.user {
				background-color: #f2f2f2;
				align-self: flex-end;
				margin-left: auto;
			}
			.message-box.ai {
				background-color: #e0f2f1;
				align-self: flex-start;
				margin-right: auto;
			}
			.input-container {
				display: flex;
				margin-top: 20px;
			}
			.input-field {
				flex: 1;
				padding: 10px;
				border: 1px solid #ddd;
				border-radius: 5px 0 0 5px;
				outline: none;
			}
			.send-button {
				padding: 10px 20px;
				background-color: #1a73e8;
				color: white;
				border: none;
				border-radius: 0 5px 5px 0;
				cursor: pointer;
			}
			.send-button:hover {
				background-color: #1669e1;
			}
			@media (max-width: 768px) {
				.chat-container {
					padding: 15px;
				}
				.message-box {
					margin-bottom: 10px;
					padding: 8px;
				}
				.input-container {
					margin-top: 15px;
				}
			}
		</style>
	</head>
	<body>
		<div class="chat-container">
			<div class="message-box user">
				<p>Hello, Kimi AI! How are you doing today?</p>
			</div>
			<div class="message-box ai">
				<p>I'm doing great! How can I assist you today?</p>
			</div>
			<div class="message-box user">
				<p>Can you tell me about your features?</p>
			</div>
			<div class="message-box ai">
				<p>
					Of course! I have many features, including language translation, Q&A,
					text generation, and more.
				</p>
			</div>
			<div class="input-container">
				<input
					type="text"
					class="input-field"
					placeholder="Type your message here..."
				/>
				<button class="send-button">Send</button>
			</div>
		</div>
	</body>
</html>
